<template>
    <div id="container">
        <div id="viewDiv"></div>
        <el-main  class="div1">
            <span>选择参考系:&nbsp;</span>
            <el-select v-model="spatialReference" style="width:200px">
                <el-option value="Web墨卡托" label="Web墨卡托"></el-option>
                <el-option value="WGS84" label="WGS84"></el-option>
                <el-option value="CGCS2000_3°_120E" label="CGCS2000_3°_120E"></el-option>
            </el-select><br/>
            <span>{{message}}</span>
        </el-main>
    </div>
</template>
   
<script setup>
import {onMounted,ref} from 'vue'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import * as projection from "@arcgis/core/geometry/projection"
const message=ref('X:000.00000000° | Y:00.00000000°')
var point_3857,point_4549
const spatialReference=ref('Web墨卡托')
onMounted(()=>{
    var map = new Map({
        basemap:"hybrid"
    })
    var view = new MapView({
        map: map, container: "viewDiv",
        spatialReferencen: { "wkid": 3857 },
        center:[119.4,36.1],
        zoom:15
    })
    projection.load()//加载执行projection中的相应成员所需的依赖项
    view.ui.remove(["zoom","attribution"])
    view.on("pointer-move",(event)=>{
        point_3857=view.toMap({//返回鼠标所在位置的的point对象,参考系为视图参考系(web墨卡托)
            x:event.x,y:event.y
        })
        point_4549=projection.project(point_3857,{wkid:4549})//基于point_3857对象将参考系转换为4549并返回一个新的point几何对象
        switch(spatialReference.value){//根据用户选择的参考系名称输出不同的坐标信息
            case "Web墨卡托"://基于point_3857几何对象输出3857参考系的xy坐标
                message.value="E:" + point_3857.x.toFixed(3) + " | N:" + point_3857.y.toFixed(3)
                break
            case "WGS84"://基于point_3857几何对象输出wgs84参考系下的经纬度坐标
                message.value=`经度:${point_3857.longitude.toFixed(8)}° | 纬度:${point_3857.latitude.toFixed(8)}°`
                break
            case "CGCS2000_3°_120E":
            //基于point_4549几何对象输出4549参考系下的xy坐标,如果point对象参考系并非3857,则经纬度的值为0,否则将自动换成
                message.value=`E:${point_4549.x.toFixed(3)} | N: ${point_4549.y.toFixed(3)}`
        }
    })
})
</script>

<style scoped>
#container,#viewDiv{
  width:100%; height:100%; padding:0;margin:0;
}
.div1{
    position:absolute; left:15px;line-height:45px;
    top:15px;  z-index:99;width:350px;height:auto;
    background-color:rgba(255,255,255);
    box-shadow:0 0 3px gray;
}
span{
    white-space: pre-line;
    color:rgb(150,150,150)
}
</style>
